@import "./cdkey";
@import "./everyday";

#signin{
    width: 100%;
    height: 12.94rem;
    background-image: url(/dist/image/signin/background.png);
    background-size: 100% 100%;
    
    overflow: hidden;
    .top{
        margin-top: 4.3rem;
        height: .6rem;
        font: .3rem/.6rem "微软雅黑";
        color: #fff;
        padding: 0 .4rem;
        .count{
            float: left;
        }
        .rule{
            float: right;
            height: .6rem;
            width: 1.16rem;
            background: url(/dist/image/signin/rule_button@2x.png);
            background-size: 100% 100%;
            text-align: center;
        }
    }
    
    .pan{
        width: 6rem;
        height: 6rem;
        position: relative;
        margin: 0 auto;
        img:nth-child(1){
            width: .8rem;
            height: 1rem;
            position: absolute;
            top: -.42rem;
            left: 2.6rem;
            z-index: 100;
        }
        img:nth-child(2){
            width: 1.74rem;
            height: 1.74rem;
            position: absolute;
            top: 2.14rem;
            left: 2.14rem;
            z-index: 100;
        }
        img:nth-child(3){
            transition: all 5s;
            transform: rotate(0);
            width: 6rem;
            height: 6rem;
            
        }
    }
    
    .per{
        font: .28rem/.48rem "微软雅黑";
        color: #e6e6e6;
        height: .48rem;
        width: 2rem;
        border-radius: .25rem;
        border: 1px solid #e6e6e6;
        margin: .5rem auto 0;
        text-align: center;
    }
    
    
    .rule-wrap{
        width: 100%;
        background: rgba(0,0,0,0.5);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 200;
        .ruler{
            position: absolute;
            top: 3.28rem;
            left: .6rem;
            height: 6.6rem;
            width: 6.3rem;
            background: #e18b40;
            border-radius: .3rem;
            color: #fff;
            overflow: hidden;
            font: .28rem "微软雅黑";
            p{
                padding: 0 .44rem;
            }
            p:nth-child(1){
                text-align: center;
                font: .36rem "微软雅黑";
                margin: .4rem 0 .34rem;
                span{
                    display: inline-block;
                    vertical-align: middle;
                    height: .16rem;
                    width: .16rem;
                    border-radius: .08rem;
                    background: #fff;
                }
            }
            p:nth-child(2){
                margin-bottom: .6rem;
            }
            button{
                height: .82rem;
                width: 2.5rem;
                font-size: .4rem;
                border-radius: .1rem;
                background: #fff;
                color: #E18b40;
                position: absolute;
                left: 0;
                right: 0;
                bottom: .52rem;
                margin: 0 auto;
            }
        }
    }
    
    .coupon-wrap{
        width: 100%;
        background: rgba(0,0,0,0.5);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 200;
        .coupon{
            position: absolute;
            left: .43rem;
            bottom: 3rem;
            width: 6.64rem;
            img:nth-child(1){
                width: 100%;
            }
            img:nth-child(2){
                width: 5.1rem;
                height: .98rem;
                position: absolute;
                left: .77rem;
                bottom: .78rem;
            }
            img:nth-child(3){
                height: .98rem;
                
                position: absolute;
                bottom: 3.6rem;
                left: 2.11rem;
            }
            img.ten{
                left: 1.95rem;
            }
        }
    }
    
    .red-wrap{
        width: 100%;
        background: rgba(0,0,0,0.5);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 200;
        img:nth-child(1){
            position: absolute;
            top: 3.96rem;
            left: 0;
            right: 0;
            margin: 0 auto;
            
            height: 5.84rem;
            width: 5.64rem;
        }
        img:nth-child(2){
            position: absolute;
            top: 8.28rem;
            left: 0;
            right: 0;
            margin: 0 auto;
            
            height: .86rem;
            width: 4.6rem;
        }
        div{
            font-size: .9rem;
            color: #fbfaa6;
            font-family: "微软雅黑";
            text-align: center;
            position: absolute;
            top: 5.98rem;
            left: 0;
            width: 100%;
            span{
                font-size: 1.1rem;
            }
        }
    }
    
    
    .code-wrap{
        width: 100%;
        background: rgba(0,0,0,0.5);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 200;
        img:nth-child(1){
            position: absolute;
            top: 3.06rem;
            left: 0;
            right: 0;
            margin: 0 auto;
            height: 6.76rem;
            width: 5.64rem;
        }
        img:nth-child(2){
            position: absolute;
            top: 3.7rem;
            left: 0;
            right: 0;
            margin: 0 auto;
            height: 2.4rem;
        }
        div:nth-child(3){
            font: .3rem "微软雅黑";
            color: #fff;
            text-align: center;
            position: absolute;
            width: 100%;
            top: 6.2rem;
        }
        div:nth-child(4){
            font: .46rem "微软雅黑";
            color: #fff;
            text-align: center;
            position: absolute;
            width: 100%;
            top: 8.4rem;
            p:nth-child(2){
                font-size: .2rem;
            }
        }
        img:nth-child(5){
            position: absolute;
            right: .9rem;
            top: 2.24rem;
            height: .64rem;
            width: .64rem;
        }
    }
}

